import Obj3D from "../Poly/Obj3D.js";
import Geo from "../Poly/Geo.js";
import Mat from "../Poly/Mat.js";

const defAttr = () => ({
  pointSize: 50,
  margin: 0.5, //圆弧的半径比例

  color: [0.3, 0.53, 1, 0.5],
  program: "",
});

//圆弧
export default class Round {
  constructor(attr) {
    Object.assign(this, defAttr(), attr);
  }

  getElement(point) {
    return this._createRound({
      a_Position: point,
      color: this.color,
      pointSize: this.pointSize,
      margin: this.margin,
    });
  }

  _createRound(config) {
    const { a_Position, color, pointSize, margin } = config;
    const { program } = this;
    return new Obj3D({
      depthTest: false,
      geo: new Geo({
        data: {
          a_Position: {
            size: 2,
            array: new Float32Array([a_Position.x, a_Position.y]),
          },
        },
      }),
      mat: new Mat({
        program: program,
        mode: ["POINTS"],
        data: {
          u_PointSize: { type: "uniform1f", value: pointSize },
          u_Set: { type: "uniform1f", value: 0 },
          u_Color: { type: "uniform4fv", value: color },
          u_Margin: { type: "uniform1f", value: margin },
        },
      }),
    });
  }
}
